<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>书籍信息展示</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
</head>
<body>
<form style="display: none;" class="layui-form" lay-filter="bookForm" id="bookForm" action="book/addAndUpdateBook">
    <input  style="display: none" type="text" name="bookid"  />
    <div class="layui-form-item">
        <label class="layui-form-label">书籍名称</label>
        <div class="layui-input-inline">
            <input type="text"  name="bookname"  placeholder="请输入书籍名称" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">作者</label>
        <div class="layui-input-inline">
            <input type="text"  name="author"  placeholder="请输入作者" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">描述</label>
        <div class="layui-input-inline">
            <input type="text"  name="remark"  placeholder="请输入书籍描述" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">出版社</label>
        <div class="layui-input-inline">
            <input type="text"  name="publisher"  placeholder="请输入出版社" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">书籍价格</label>
        <div class="layui-input-inline">
            <input type="number"  name="price"  placeholder="请输入书籍价格" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">书籍类型</label>
        <div class="layui-input-inline">
            <select name="typeid" id="typeid">
                <option value="">--请选择--</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">书籍状态</label>
        <div class="layui-input-inline">
            <select name="status" >
                <option value="1">上架</option>
                <option value="0">下架</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<table class="layui-hide" id="test" lay-filter="test"></table>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
        <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
        <button class="layui-btn layui-btn-sm" lay-event="addBook">新增</button>
    </div>
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    {{#  if(d.status == 0){ }}
    <a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="aaa">点击上架</a>
    {{#  } else { }}
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="aaa">点击下架</a>
    {{#  } }}
</script>

<script src="${pageContext.request.contextPath}/layui/layui.js"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->

<script>
    layui.use(['table','jquery','form','layer'], function(){
        var table = layui.table;
        var $ = layui.jquery;
        var form = layui.form;
        var layer = layui.layer;
        table.render({
            elem: '#test',
            id:'table1'//如果不设置 默认从标签中的id属性值获取
            //向后台发送的请求的路径
            ,url:'${pageContext.request.contextPath}/book/findAllBook'
            ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            ,title: '书籍信息表'
            ,cols: [[
                {type: 'checkbox', fixed: 'left'}
                ,{field:'bookid', title:'书籍编号',sort:true}
                ,{field:'bookname', title:'书籍名称'}
                ,{field:'author', title:'作者'}
                ,{field:'count', title:'数量'}
                ,{field:'remark', title:'描述'}
                ,{field:'typename', title:'类型'}
                ,{field:'publisher', title:'出版社'}
                ,{field:'price', title:'价格',width:80}
                ,{field:'status', title:'状态',templet: function(d){
                        //得到当前行数据，并拼接成自定义模板
                        if(d.status==0){
                            return '<a class="layui-btn layui-btn-danger layui-btn-xs" >下架状态</a>';
                        }else{
                            return '<a class="layui-btn layui-btn-warm layui-btn-xs">上架状态</a>';
                        }
                    }}
                ,{field:'typeid', title:'类型编号',hide:true}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo',width:200}
            ]]
        });

        //页面加载完成时，立即就执行的函数
        $(function(){
            //调用查询书籍类型信息的方法
            bookType();
        })

        //自定义函数让填充书籍类型的下拉框
        function bookType(){
            $.ajax({
                type:'get',
                url:'${pageContext.request.contextPath}/type/findAllType',
                dataType:'json', 	//预期的服务器响应的数据类型。
                success:function (result) {
                    // 此时的reult是具有 json格式的字符串
                    /*接下来我们需要把返回的数据进行遍历操作，
                    然后把数据填充到书籍类型的下拉框中去(接下来就是DOM操作),
                    此时我们要先把result转换成真正的json类型
                    */
                    $.each(result,function (i,o) {
                        //此时i就是下标   o就是我们需要的每一个类型信息
                        $("#typeid").append(
                            $("<option></option>").val(o.typeid).text(o.typename)
                        )
                    })
                    //对表单中的元素进行渲染
                    form.render('select', 'bookForm');
                }
            })
        }

        //新增和修改的表单提交事件的触发    * 就是提交按钮中 的lay-filter属性的值
        form.on('submit(formDemo)', function(data){
            //console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            $.ajax({
                type:'post',
                url:'${pageContext.request.contextPath}/book/addOrUpdateBook',
                data:data.field,
                success:function (result) {
                    layer.closeAll();//关闭所有的弹出框
                    if(result==1){
                        layer.msg('新增/修改成功', {icon: 1});
                        //操作成功之后，重新加载表格
                        //重载时，需要一个参数url路径，如果不写默认还是按照 初始化时的路径重载
                        table.reload("table1");
                    }else{
                        layer.msg('新增/修改失败', {icon: 5});
                    }
                }
            })

            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        //头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'getCheckData':
                    var data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：'+ data.length + ' 个');
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选': '未全选');
                    break;
                case 'addBook':
                    //打开弹出框之前先把表单内容清空
                    $("#bookForm")[0].reset();
                    //2.打开弹出框
                    layer.open({
                        type:1,
                        title:['新增书籍','font-size:25px;'],
                        content: $('#bookForm'),//弹出框中显示的内容
                        skin: 'layui-layer-molv',
                        anim: 4,
                        area: '350px',
                        offset: '100px'
                    });
                    break;

                //自定义头工具栏右侧图标 - 提示
                case 'LAYTABLE_TIPS':
                    layer.alert('这是工具栏右侧自定义的一个图标按钮');
                    break;
            };
        });

        //监听行工具事件
        /**
         * tool(test) 中的test其实就是上边table容器中的lay-filter属性的值
         */
        table.on('tool(test)', function(obj){
            var data = obj.data;//取出当前点击行的所有数据信息
            //console.log(data.bookid+"=="+data.status)
            /**
             * if中的判断条件的值 刚好就是我们绑定的右侧工具栏的模板中的标签的lay-event属性的值
             */
            if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    $.ajax({
                        type:'get',
                        url:'${pageContext.request.contextPath}/book/delBookById',
                        data:{"bookid":data.bookid},
                        success:function (result) {
                            if(result==1){
                                layer.msg('删除成功', {icon: 1});
                                //操作成功之后，重新加载表格
                                //重载时，需要一个参数url路径，如果不写默认还是按照 初始化时的路径重载
                                table.reload("table1");
                            }else{
                                layer.msg('删除失败', {icon: 5});
                            }
                        }
                    })
                    //关闭弹框
                    layer.close(index);
                });
            } else if(obj.event === 'edit'){
                //打开弹出框之前先把表单内容清空
                $("#bookForm")[0].reset();
                //将当前点击行的数据填充到表单中
                form.val('boookFrm', data);
                //打开弹出框
                layer.open({
                    type:1,
                    title:['修改书籍','font-size:25px;'],
                    content: $('#bookForm'),//弹出框中显示的内容
                    skin: 'layui-layer-molv',
                    anim: 4,
                    area: '350px',
                    offset: '100px'
                });

            }else if(obj.event === 'aaa'){
                //上架下架功能
                /**
                 * 向后台发送ajax请求，要传递两个参数，id编号和状态码
                 */
                $.ajax({
                    type:'post',
                    url:'${pageContext.request.contextPath}/book/updateStatus',
                    data:{"bookid":data.bookid,"status":data.status},
                    success:function (result) {
                        console.log(result);
                        if(result==1){
                            layer.msg('上架/下架成功', {icon: 1});
                            //操作成功之后，重新加载表格
                            //重载时，需要一个参数url路径，如果不写默认还是按照 初始化时的路径重载
                            table.reload("table1");
                        }else{
                            layer.msg('上架/下架失败', {icon: 5});
                        }
                    }
                })
            }
        });
    });



</script>

</body>
</html>
